<template>
  <div>
    <el-card class="box">
      <el-input v-model="details.title" placeholder="请输入标题" prefix-icon="el-icon-collection-tag"></el-input>
      <span>日期：</span><el-date-picker v-model="details.date" type="date" placeholder="选择日期">
      </el-date-picker>
      <span>发布人：</span><el-select v-model="details.user" clearable placeholder="请选择发布人" prefix-icon="el-icon-user">
        <el-option
          v-for="item in user"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span>分类：</span><el-select v-model="details.category" clearable placeholder="请选择分类">
        <el-option
          v-for="item in category"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="content">
        <!-- 富文本编辑器 -->
        <quill-editor v-model="details.content"></quill-editor>
        <el-button type="primary" @click="EditUpdate()">发布文章</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { sys, user, category } from '../api/json.json'
export default {
  data() {
    return {
      title: '',
      details: '',
      user: user,
      category: category,
      sys: sys
    }
  },
  created() {
    this.title = this.$route.params.id
    this.sys.forEach(el => {
      if (el.number === this.$route.params.id) {
        this.details = el
      }
    })
  },
  methods: {
    // 文章内容更新
    async EditUpdate() {
      await this.$http.get('edit.php', { params: this.details })
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.el-card.box {
  span {
    font-size: 14px;
  }
  .el-input,
  .el-select {
    margin: 0 15px 15px 0;
  }
  .content {
    font-size: 16px;
    color: #666;
    .quill-editor {
      margin-bottom: 20px;
    }
  }
}
</style>
